<template>
	<div class="index-filters">
		<!-- 视图切换 -->
		<div class="index-filters-sort flex">
			<a-select v-model="viewType" :style="{ width:'130px' }" @change="handleBtn('viewType', $event)">
				<a-option v-for="item in viewList" :key="item.value" :value="item.value" :label="item.label" />
			</a-select>
			<div class="right">
				<a-trigger :trigger="['click']" position="br" :popup-translate="[0, 5]">
					<div class="flex"> <i class="EachApp EachApp_paixu"></i>排序 </div>
					<template #content>
						<div class="trigger-style sort-list flex">
							<a-radio-group v-model="filterParams.sort" @change="handleBtn('sort', $event)" class="flex m50">
								<a-radio v-for="item in SORT_TYPE" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
							</a-radio-group>
						</div>
					</template>
				</a-trigger>
				<a-trigger :trigger="['click']" position="br" :popup-translate="[0, 5]">
					<div class="flex"> <i class="EachApp EachApp_paixu"></i>更多</div>
					<template #content>
						<div class="trigger-style sort-list flex">
							<div class="item" v-for="item in btnList" :key="item.value">
								<a-button>{{ item.label }}</a-button>
							</div>
						</div>
					</template>
				</a-trigger>
			</div>
		</div>
		<!-- 搜索条件 -->
		<div :class="['index-filters-item flex', { height: !filterList.length }]">
			<div>
				<a-tag v-for="(item, index) in filterList" :key="index" color="arcoblue">
					<span v-if="item.options">{{ `${item.label}: ${item.options.find((child) => child.value === item.value)?.label}` }}</span>
					<span v-else>
						<template v-if="item.type === 'input' || !item.type">{{ `${item.label}: ${item.value}` }}</template>
						<template v-if="item.type === 'select'">{{item.label }}: {{ item.selectList.find(child => child.id === item.value)?.label }}</template>
					</span>
					<i class="EachApp EachApp_guanbi close" @click="handleDelete(item.filterIndex, index, item.keys)"></i>
				</a-tag>
			</div> 
			<div class="right">
				<!-- <a-trigger :trigger="['click']" position="br" :popup-translate="[0, 5]" ref="filterTrigger" :render-to-body="false" class="aaaaa">
					<a-button type="text" link size="small" class="hover">添加过滤</a-button>
					<template #content>
						<div class="trigger-style">
							<slot></slot>
						</div>
					</template>
				</a-trigger> -->
				<el-popover ref="popoverRef" placement="bottom-end" :virtual-ref="popoverBtnRef" trigger="click" virtual-triggering width="400">
					<slot></slot>
				</el-popover>
				<el-button type="primary" link size="small" ref="popoverBtnRef" v-click-outside="handleMixinPopover">添加过滤</el-button>
				<a-button type="text" @click="handleBtn('reset')" class="hover info">重置</a-button>
				<a-button type="primary" size="small" @click="handleBtn('save')">保存新视图</a-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
const popoverBtnRef = ref();
const visible = ref(false)
import { useUserStore } from "@/store/modules/user";
import { useCache } from "@/hooks/useCache";
const { wsCache } = useCache();
const userStore = useUserStore();
import mitt from "@/utils/bus";
import mixin from "@/mixins/index";
const { handleMixinPopover } = mixin();
import { SORT_TYPE } from "@/utils/filter";
const getEmit = inject('getEmit');
const getList = inject('getList');
const filterTrigger = ref(null);
const { t } = useI18n();
const route = useRoute();
const viewType = ref(0);
const viewList = ref([
	{ value: 0, label: "阶段视图" },
	{ value: 1, label: "表格视图" }
]);
const btnList = ref([
	{ value: 0, label: "按钮" },
	{ value: 1, label: "按钮" },
	{ value: 2, label: "按钮" }
]);
const filterList = ref([]); // 过滤参数列表
const filterParams = ref({
	sort: 0
}); // 过滤参数信息
const filterParamsInit = ref({ ...filterParams.value })
const searchKey = ref(null); // 关键字搜索参数
watch(
	() => filterList.value,
	async (e) => {
		filterParams.value = {
			...filterParamsInit.value,
			...e.reduce((pre, current) => {
				pre[current?.keys] = current?.value;
				return pre;
			}, {})
		};
	},
	{ deep: true, immediate: true }
);

onMounted(() => {
	const list = wsCache.get("viewInfo");
	const items = list?.find((item) => item.page === route.path);
	// console.log("list===", list, items);
	if (list && items) {
		viewType.value = items.viewType;
		filterList.value = items.filterList;
		mitt.emit('handleEmit', { emitType: 'view', value: items.viewType });
		// mitt.emit("handleView", items.viewType);
		const searchKeyParams = items.filterList.find((item) => item.filterIndex === 0);
		searchKey.value = { ...searchKeyParams };
		mitt.emit("handleDelete", searchKeyParams.value);
		if (items?.filterList.length) {
			FormFilterRef.value.filterList.map((item) => {
				items?.filterList.forEach((child) => {
					if (item.filterIndex === child.filterIndex) {
						Object.keys(item).forEach((keys) => {
							item[keys] = child[keys];
						});
					}
				});
				return item;
			});
		}
	}
});

// 搜索-关键字
const handleSearchKeys = (value, index) => {
	if (!value) {
		const idx = filterList.value.findIndex((item) => item.filterIndex === index);
		filterList.value.splice(idx, 1);
	} else {
		searchKey.value = { filterIndex: 0, label: "模糊筛选", keys: "searchKey", value };
		const idx = filterList.value.findIndex((item) => item.filterIndex === 0);
		filterList.value.push(searchKey.value);
	}
};
// 搜索-添加过滤提交的参数
const handleSubmitFilter = (value) => {
	if(value === 'reset'){
		filterList.value = [];
		mitt.emit("handleDelete", "");
		nextTick(() => {
			getList();
		})
	}else{
		const list = JSON.parse(JSON.stringify(value || []));
		list.forEach(item => {
			const isHave = filterList.value.some(child => child.filterIndex === item.filterIndex);
			if(!isHave){
				filterList.value.push(item);
			}else{
				const isItem = filterList.value.find(child => child.filterIndex === item.filterIndex);
				const isIndex = filterList.value.findIndex(child => child.filterIndex === item.filterIndex);
				filterList.value.splice(isIndex, 1, item);
			}
		})
	}
};

// 清除关键字
const handleDelete = async (filterIndex, index, keys) => {
	filterParams.value[keys] = '';
 	getEmit({ emitType: 'delete', value: filterList.value.length === 1 });
	filterList.value.splice(index, 1);
};
// 按钮处理
const handleBtn = async (type, value) => {
	// viewType切换视图   save保存新视图   reset重置
	if (type === "viewType") {
		getEmit({ emitType: 'view', value });
	} else if (type === "save") {
		userStore.setViewInfo({
			page: route.path,
			viewType: viewType.value,
			filterList: JSON.parse(JSON.stringify(filterList?.value || []))
		});
	} else if (type === "reset") { // 重置
		filterList.value = [];
		searchKey.value = null;
		mitt.emit("handleDelete", "");
		nextTick(() => {
			getList();
		})
	} else if (type === "sort") { // 排序
		getList();
	}
};
// 关键字搜索
mitt.on("handleSearch", value => {
	handleSearchKeys(value);
});
defineExpose({
	filterParams,
	filterList,
	handleSubmitFilter,
})
</script>
